import { NavBar } from 'antd-mobile'
import { useNavigate } from "react-router-dom";
// import "./index.scss"
//导入css-modules中的样式
import  styles from "./index.module.css"
import propTypes from "prop-types"

const NavHeader = ({ onLeftClick, rightContent, children,myStyle}) => {
    const navigate =useNavigate()
    // 默认点击行为
    const defaultHandler = () => navigate(-1)
    return (
        <NavBar
            style={myStyle}
            className={styles.navbar}
            mode="light"
            icon={<i className="iconfont icon-back" />}
            onLeftClick={onLeftClick || defaultHandler}
            rightContent={rightContent}
        >
            {children}
        </NavBar>
    )
}
//设置组件参数的校验规则
NavHeader.propTypes={
    children:propTypes.string.isRequired,
    myStyle:propTypes.object,
    onLeftClick:propTypes.func
}
export default NavHeader